<template>
  <ul class="custom_menu">
    <template v-for="item in menuList" :key="item.path">
      <li
        class="menu_item"
        :class="{ menu_item_active: item.path === pagePath }"
        v-if="!item.meta.hidden && !item.children"
        @click="handleClickMenuItem(item)"
      >
        <span class="menu_item_inner">
          {{ item.meta.title }}
        </span>
      </li>
      <li
        class="sub_menu"
        v-if="!item.meta.hidden && item.children"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div
          class="menu_item"
          :class="{ menu_item_active: haveOwnChildren(item.children) }"
        >
          <span class="menu_item_inner">
            {{
              item.children.find((child) => child.path === pagePath)?.meta
                .title || item.meta.title
            }}
          </span>
        </div>
        <div class="sub_menu_children">
          <div
            class="sub_menu_child_item"
            v-for="child in item.children"
            :key="child.path"
            @click="handleClickChildItem(child)"
            :class="{ menu_item_active: child.path === pagePath }"
          >
            <span>{{ child.meta.title }}</span>
          </div>
        </div>
      </li>
    </template>
    <!-- 超出省略的菜单 -->
    <template v-if="omitMenuList.length">
      <li
        class="sub_menu"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="menu_item">
          <span class="menu_item_inner">。。。</span>
        </div>
        <div class="sub_menu_children">
          <template v-for="omitItem in omitMenuList">
            <div
              class="sub_menu_child_item"
              :key="omitItem.path"
              @click="handleClickChildItem(omitItem)"
              :class="{ menu_item_active: omitItem.path === pagePath }"
              v-if="!omitItem.meta.hidden"
            >
              <span>{{ omitItem.meta.title }}</span>
            </div>
          </template>
        </div>
      </li>
    </template>
  </ul>
</template>

<script setup>
import { shallowRef } from "vue";

const props = defineProps({
  pagePath: {
    type: String,
    default: "/",
  },
  themeColor: {
    type: String,
  },
  menuList: {
    type: Array,
  },
  omitMenuList: {
    type: Array,
  },
});
const emit = defineEmits(["handleSelect"]);

const currentSubChildRef = shallowRef(null);

// 是否包含选中的子菜单
const haveOwnChildren = (children) => {
  if (children) {
    return children.some((v) => v.path === props.pagePath);
  } else {
    return false;
  }
};

// 点击菜单item
const handleClickMenuItem = (item) => {
  if (!item.children) {
    emit("handleSelect", item);
  }
};

// 点击子菜单item
const handleClickChildItem = (item) => {
  emit("handleSelect", item);
  if (currentSubChildRef.value) {
    currentSubChildRef.value.style.display = "none";
    currentSubChildRef.value = null;
  }
};

// 鼠标移入
const handleMouseEnter = (e) => {
  const currentMenuItem = e.target.querySelector(".sub_menu_children");
  if (currentMenuItem?.childElementCount) {
    currentMenuItem.style.display = "flex";
    currentSubChildRef.value = currentMenuItem;
  }
};

// 鼠标移出
const handleMouseLeave = (e) => {
  const currentMenuItem = e.target.querySelector(".sub_menu_children");
  if (currentMenuItem?.childElementCount) {
    currentMenuItem.style.display = "none";
    currentSubChildRef.value = null;
  }
};
</script>

<style lang="less" scoped>
li {
  font-size: unset;
}
@keyframes dropdown-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.custom_menu {
  display: flex;
  // height: 100%;
  height: 6vh;
  .menu_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12rem;
    height: 100%;
    background-color: rgb(13, 61, 74);
    margin-right: 1rem;
    transform: skewX(29deg);
    cursor: pointer;
    &:hover {
      color: #fff;
      background-color: #046468;
    }
  }
  .menu_item_active {
    background-color: rgba(57, 171, 183, 1) !important;
    color: #fff !important;
  }
  .menu_item_inner {
    display: block;
    transform: skewX(-29deg);
    font-size: 1rem;
  }
  .sub_menu {
    position: relative;
  }
  .sub_menu_children {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
    position: absolute;
    top: calc(100vh * 46 / 1080);
    left: 53%;
    transform: translateX(-50%);
    width: 8rem;
    padding: 10px;
    background-color: rgb(13, 61, 74);
    font-size: 1rem;
    z-index: 100;
    animation: dropdown-animation 0.5s forwards;
    .sub_menu_child_item {
      padding: 1.2rem 0;
      border-radius: 6px;
      background-color: rgb(11, 53, 65);
      text-align: center;
      z-index: 200;
      cursor: pointer;
      &:hover {
        color: #fff;
        background-color: #046468;
      }
    }
  }
}
</style>
